@layer base {
  
  body, :host {
    /* Color */
    --light-100: #ffffff;
--light-200: #f2f2f2;
--dark-500: #4d4d4d;
--dark-800: #181818;
--dark-900: #000000;
--blue-500: #1e90ff;
--blue-100: #e8f3ff;
--yellow-500: #ffc300;
--yellow-200: #ffe89f;
--yellow-100: #fff3cc;
    /* Fonts */
    --font-merriweather: 'Merriweather',serif;
--font-poppins: 'Poppins',sans-serif;

    /* Font size */
    --text-tiny: 0.75rem;
--text-small: 0.875rem;
--text-main: clamp(1rem, 0.986rem + 0.07vw, 1.05rem);;
--text-large: clamp(1.14rem, 1.106rem + 0.17vw, 1.26rem);;
--heading-h6: clamp(1rem, 1rem + 0vw, 1rem);;
--heading-h5: clamp(1.26rem, 1.222rem + 0.19vw, 1.39rem);;
--heading-h4: clamp(1.59rem, 1.492rem + 0.49vw, 1.93rem);;
--heading-h3: clamp(2rem, 1.802rem + 0.99vw, 2.69rem);;
--heading-h2: clamp(2.52rem, 2.174rem + 1.73vw, 3.73rem);;
--heading-h1: clamp(3.18rem, 2.606rem + 2.87vw, 5.19rem);;
--heading-display: clamp(4rem, 3.082rem + 4.59vw, 7.21rem);;
    /* Font weight */
    --weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.25);
--shadow-base:  0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
--shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Border radius */
    
    /* Spacing */
    --site-margin: clamp(1rem, 0.428rem + 2.86vw, 3rem);;
--section-space-page-top: clamp(10rem, 8.6667rem + 6.6667vw, 14rem);
--section-spacing-large: clamp(7.23rem, 5.444rem + 8.93vw, 13.48rem);;
--section-spacing-main: clamp(5.17rem, 4.062rem + 5.54vw, 9.05rem);;
--section-spacing-small: clamp(3.69rem, 3.01rem + 3.4vw, 6.07rem);;
--space-1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);;
--space-2: clamp(0.35rem, 0.344rem + 0.03vw, 0.37rem);;
--space-3: clamp(0.49rem, 0.47rem + 0.1vw, 0.56rem);;
--space-4: clamp(0.69rem, 0.65rem + 0.2vw, 0.83rem);;
--space-5: clamp(0.96rem, 0.882rem + 0.39vw, 1.23rem);;
--space-6: clamp(1.34rem, 1.198rem + 0.71vw, 1.84rem);;
--space-7: clamp(1.88rem, 1.634rem + 1.23vw, 2.74rem);;
--space-8: clamp(2.64rem, 2.228rem + 2.06vw, 4.08rem);;
--border-width: 1px;
--letter-spacing-regular: -0.02em;
--letter-spacing-tight: -0.03em;
--letter-spacing-tighter: -0.04em;
--radius-small: 0.5rem;
--radius-main: 1rem;
--radius-large: 2rem;
--radius-round: 99vw;
--line-height-trim-top: 0.5em;
--line-height-trim-bottom: 0.5em;
--gap: var(--space-4);
--container-main: 80rem;
--container-small: 40rem;
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}